<template>
  <div class="list-wrap">
    <div class="cap">
      周末去哪儿
    </div>
    <div class="box" v-for="item of list" :key="item.id">
      <div class="img">
        <img :src="item.imgUrl" alt="">
      </div>
      <div class="desc border-bottom">
        <div class="title">{{item.title}}</div>
        <div class="infor">{{item.desc}}</div>
      </div>
    </div>
    <div class="footer">copyright</div>
  </div>
</template>

<script>
export default {
  name: 'Weekend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/variables.styl'
  .border-bottom::before
    border-color #222
  .cap
    font-size .28rem
    background-color #eee
    padding .2rem .12rem

  .box
    .img
      height 2.94rem
      overflow hidden
    .desc
      padding-bottom .4rem
      padding-left .2rem
      .title
        color #000
        font-size .30rem
        margin .2rem 0
        ellipsis()
      .infor
        color #777
        font-size .28rem
        ellipsis()

  .footer
    font-size .28rem
    background-color #eee
    padding .4rem 0 .3rem 0
    text-align center

</style>
